<template>
  <div class="big-screen-page">
    <CommonPanel name="left" :width="extraScale * scale(550) + 'px'">
      <component :is="LayoutLeft">
        <template v-for="item in coms" #[item.slot]>
          <component :is="item.com" />
        </template>
      </component>
    </CommonPanel>
    <CommonPanel name="right" :width="extraScale * scale(550) + 'px'">
      <component :is="LayoutRight">
        <template v-for="item in coms" #[item.slot]>
          <component :is="item.com" />
        </template>
      </component>
    </CommonPanel>
  </div>
</template>

<script setup lang="ts">
import { inject, computed } from 'vue';
import { scale } from '@sutpc/config';
import Layout1 from './layouts/layout-1.vue';
import Layout2 from './layouts/layout-2.vue';
import Layout3 from './layouts/layout-3.vue';
import Layout4 from './layouts/layout-4.vue';
import Com1 from './components/com-1.vue';
import Com2 from './components/com-2.vue';
import Com3 from './components/com-3.vue';
import Com4 from './components/com-4.vue';

const main: any = inject('main');
const CommonPanel = main.components.CommonPanel;

const left = [
  { minWidth: 0, maxWidth: 1920, minRatio: 0, maxRatio: 0.5, value: Layout1 },
  { minWidth: 1921, maxWidth: 3720, minRatio: 0.5, maxRatio: 1.5, value: Layout1 },
  { minWidth: 3721, maxWidth: 5760, minRatio: 1.5, maxRatio: 2.5, value: Layout4 },
  {
    minWidth: 5761,
    maxWidth: Number.MAX_VALUE,
    minRatio: 2.5,
    maxRatio: Number.MAX_VALUE,
    value: Layout4
  }
];

const right = [
  { minWidth: 0, maxWidth: 1920, minRatio: 0, maxRatio: 0.5, value: Layout1 },
  { minWidth: 1921, maxWidth: 3720, minRatio: 0.5, maxRatio: 1.5, value: Layout1 },
  { minWidth: 3721, maxWidth: 5760, minRatio: 1.5, maxRatio: 2.5, value: Layout3 },
  {
    minWidth: 5761,
    maxWidth: Number.MAX_VALUE,
    minRatio: 2.5,
    maxRatio: Number.MAX_VALUE,
    value: Layout3
  }
];

const calcLayoutByWidth = (arr) => {
  const finded = (arr || []).find(
    (x) => window.innerWidth >= x.minWidth && window.innerWidth <= x.maxWidth
  );
  return finded?.value;
};

const coms = [
  { com: Com1, slot: 'slot1' },
  { com: Com2, slot: 'slot2' },
  { com: Com3, slot: 'slot3' },
  { com: Com4, slot: 'slot4' }
];

const ratio = computed(() => {
  const h = window.innerHeight / 9;
  const w = window.innerWidth / 16;
  return w / h;
});

const extraScale = computed(() => {
  // 16:9的基准比例下, 考虑宽高比的倍率
  if (ratio.value < 0.5) {
    // 长条屏
    return ratio.value;
  } else if (ratio.value < 1.5) {
    // 1倍屏
    return 1;
  } else if (ratio.value < 2.5) {
    // 2倍屏
    return 1.5;
  } else {
    // 3倍屏
    return 2;
  }
});

const calcLayoutByRatio = (arr) => {
  const finded = (arr || []).find((x) => ratio.value >= x.minRatio && ratio.value <= x.maxRatio);
  return finded?.value;
};

const LayoutLeft = computed(() => calcLayoutByRatio(left));
const LayoutRight = computed(() => calcLayoutByRatio(right));
</script>

<style lang="less" scoped></style>
